<template>
    <Poptip v-model="visible" class="pip-div" placement="bottom" width="300">
<!--        <Button type="primary">设置</Button>-->
        <Icon class="pip-icon" type="md-list"></Icon>
        <div slot="content">
            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                <Checkbox
                        :indeterminate="indeterminate"
                        :value="checkAll"
                        @click.prevent.native="handleCheckAll">全选</Checkbox>
            </div>
            <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
                <template v-for="(item,index) in initList">
                    <Row class="row-col" v-if="index%2===0">
                    </Row>
                    <Col span="12"><Checkbox :label="getColKey(item)" >{{getTitle(item)}}</Checkbox></Col>
                </template>
            </CheckboxGroup>
            <br>
            <div class="pip-button">
                <Button size="small" class="pip-btn" type="default" @click="close">关闭</Button>
                <Button size="small" class="pip-btn" type="default" @click="handleTable">确定</Button>
            </div>
        </div>
    </Poptip>
</template>

<script>

    import { operatColumn,getPath } from '@/libs/table-util'

    export default {
        name: "ColPopTip",
        props: {
            list: {
                type: Array
            },
            module:{
                type: String,
                default:''
            }
        },
        data() {
            return {
                visible: false,
                checkAll: false,
                indeterminate: false,
                checkAllGroup: [],
                allCheckKey: [],
                storeGroup: [], // 原选择数据
            }
        },
        methods: {
            close() {
                this.visible = false;
            },
            handleTable() {
                this.compareColumn()
                let columns = this.$localColumns()
                columns = columns.filter(s => s.hidden === false)
                this.$emit('setColumn', columns);
                this.close()
            },
            handleCheckAll() {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    this.checkAllGroup = this.allCheckKey;
                } else {
                    this.checkAllGroup = [];
                }
            },
            checkAllGroupChange(data) {
                if (data.length === this.allCheckKey.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            },
            init() {
                this.checkAllGroup = [] // 初始化
                this.storeGroup = []
                let columns = this.$localColumns(this.list)
                columns.forEach(item => {
                    this.allCheckKey.push(this.getColKey(item))
                    if (!item.hidden) {
                        this.checkAllGroup.push(this.getColKey(item))
                    }
                })
                this.checkAllGroupChange(this.checkAllGroup)
            },
            getStoreGroup() {
                this.storeGroup = []
                let columns = this.$localColumns()
                columns.forEach(model => {
                    if (!model.hidden) {
                        this.storeGroup.push(this.getColKey(model))
                    }
                })
                return this.storeGroup
            },
            compareColumn() {
                // 差集
                let a = this.checkAllGroup
                let b = this.getStoreGroup()
                let addColumn = a.filter(function (v) {
                    return b.indexOf(v) === -1
                })
                let delColumn = b.filter(function (v) {
                    return a.indexOf(v) === -1
                })
                operatColumn(delColumn, true)
                operatColumn(addColumn, false)
            },
            getColKey(obj) { // 统一处理，防止重复代码
                return obj.key === undefined ? obj.slot : obj.key
            },
            getTitle(obj) {
                let key = obj.key === undefined ? obj.slot : obj.key
                if (this.module === '') {
                    return this.$t(key)
                }
                let title = this.$t(this.module + '_' + key)
                if (title.indexOf(this.module + '_') < 0) {
                    return title;
                } else {
                    return this.$t(key)
                }
            }
        },
        watch: {
            visible: function (val) {
                this.visible = val;
                if (val) {
                    this.init()
                }
            }
        },
        computed: {
            initList() {
                return this.$localColumns(this.list).filter(c=>c.type!=='selection').filter(c=>c.key!==undefined)
            }
        },
        mounted() {
            this.init()
            this.handleTable()
        }
    }
</script>

<style lang="less">
    .pip-div{
        float: right;
        margin-right: 15px;
    }
    i.pip-icon:hover{
        color: #2d8cf0;
    }
    .row-col{
        margin-bottom: 8px;
    }
    .pip-button{
        margin-top: 15px;
        margin-bottom: 5px;
        text-align: center;
    }
    .pip-btn{
        margin-right: 10px;
    }

</style>